<template>
  <div class="editClueInformation_module">
    <div class="form_box">
      <el-form
        label-width="120px"
        :model="formData"
        :rules="rules"
        ref="ruleFormRef"
      >
        <!-- 客户姓名 -->
        <el-form-item
          :label="$t('clueInformation_customerMoniker')"
          prop="customerName"
        >
          <el-input
            v-model="formData.customerName"
            :placeholder="$t('clueInformation_customerMoniker_placeholder')"
            v-trim
          ></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item :label="$t('clueInformation_phoneNum')" prop="phoneNumber">
          <el-input
            v-model="formData.phoneNumber"
            :placeholder="$t('clueInformation_phoneNum_placeholder')"
            v-trim
          ></el-input>
        </el-form-item>
        <!-- 所属行业 -->
        <el-form-item :label="$t('clueInformation_Sector')" prop="storeTypeIndustryId">
          <storeTypeIndustry v-model="formData.storeTypeIndustryId" @getLabels="getAddressLabels"></storeTypeIndustry>
        </el-form-item>
        <!-- 店铺数量 -->
        <el-form-item :label="$t('clueInformation_numberOfStores')" prop="storeCount">
          <el-input
            v-model="formData.storeCount"
            :placeholder="$t('clueInformation_numberOfStores_placeholder')"
            v-trim
          ></el-input>
        </el-form-item>
        <!-- 线索来源 -->
        <el-form-item :label="$t('clueInformation_sourceOfClues')" prop="leadSource">
          <el-select
            v-model="formData.leadSource"
            :placeholder="$t('clueInformation_sourceOfClues_placeholder')"
          >
            <el-option
              v-for="item in sourceOfCluesList"
              :key="item.customerLeadSourcesId"
              :label="item.leadSourcesName"
              :value="item.customerLeadSourcesId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 客户地址 -->
        <el-form-item :label="$t('clueInformation_customerAddress')" prop="customerAddress">
          <addressCascader v-model="formData.customerAddress"></addressCascader>
        </el-form-item>
        <!-- 详细地址 -->
        <el-form-item :label="$t('clueInformation_detailedAddress')">
          <el-input
            v-model="formData.customerAddressDetail"
            :placeholder="$t('clueInformation_detailedAddress_placeholder')"
            v-trim
          ></el-input>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item :label="$t('clueInformation_notes')">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            :placeholder="$t('clueInformation_notes_placeholder')"
            v-trim
          ></el-input>
        </el-form-item>
        <e-form-item>
          <div class="wfull flex justify_center">
            <el-button @click="handleSubmit(ruleFormRef)" type="primary" :disabled="isLoading" :loading="isLoading">{{
              $t("update")
            }}</el-button>
            <el-button @click="handleCancel">{{ $t("btn_cancel") }}</el-button>
          </div>
        </e-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive,onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import {
  FormDataType,
  formDataRules
} from "../../../viewModel/cluInformation/addClueInformation";
import {TableItemDataType} from "../../../viewModel/cluInformation/cluInformationList"

import {upDataClueInfoData,getClueInformDetail,getLeadSources} from "../../../service/clueInformation/clueInformation"

import addressCascader from "../../../components/addressCascader/addressCascader.vue";
import storeTypeIndustry from "../../../components/storeTypeIndustry/storeTypeIndustry.vue";
import {useRouter} from "vue-router"
export default defineComponent({
  components: {
    addressCascader,
    storeTypeIndustry
  },
  setup() {
    const router = useRouter()
    const ruleFormRef = ref<FormInstance>();
    const formData = reactive<FormDataType>(new FormDataType());
    const rules = reactive<FormRules<FormDataType>>(formDataRules);
    const sourceOfCluesList = ref([]);
    const getAddressLabels = (payload:string[]) => {
      formData.storeTypeIndustry = payload.join("/")
    }

    onMounted(() => {
      getLeadSources().then((res) => {
        if (res && res.data && res.data.data) {
        sourceOfCluesList.value = res.data.data.map((item:{customerLeadSourcesId:number,leadSourcesName:string}) => {
          return {
            ...item,
            customerLeadSourcesId: item.customerLeadSourcesId + ""
          }
        })
      }
      }).catch((err) => {
        console.log("失败:",err);
        
      })
      let id:string = router.currentRoute.value.params.customerId as string
      getClueInformDetail(id).then((res) => {
       if (res && res.data && res.data.data) {
         let data = res.data.data as TableItemDataType
        formData.customerName = data.customerName
        formData.phoneNumber = data.phoneNumber
        formData.storeTypeIndustryId = data.storeTypeIndustryId.split("/").map((item) => Number(item))
        formData.storeCount = data.storeCount
        formData.leadSource = data.leadSource
        formData.customerAddress = data.customerAddress.split("/")
        formData.customerAddressDetail = data.customerAddressDetail
        formData.remark = data.remark
        originData.originalPhone = data.originalPhone
       }
      }).catch(err => {
        console.log("失败:",err);
        
      })
    })

    // 原始数据
    const originData  = reactive({
        originalPhone: "",
      })
    const isLoading = ref<boolean>(false)
    const handleCancel = () => {
      router.push("/baseLayout/clueInformationList")
    }
    const handleSubmit = async (formEl: FormInstance | undefined) => {
      
      if (!formEl) {
        return;
      }
     await formEl.validate((valid) => {
        if (valid) {
          isLoading.value = true
          let submitData = {
            ...formData,
             storeTypeIndustryId: formData.storeTypeIndustryId.join("/"),
             customerAddress: formData.customerAddress.join("/"),
             originalPhone: originData.originalPhone,
             customerId: router.currentRoute.value.params.customerId.toString()
          }
          upDataClueInfoData(submitData).then(() => {
            isLoading.value = false
            
            router.push("/baseLayout/clueInformationList")
          }).catch(err => {
            console.log("失败：",err);
            isLoading.value = false
            
          })
        }
     })
    };
    return {
      formData,
      sourceOfCluesList,
      ruleFormRef,
      rules,
      handleSubmit,
      getAddressLabels,
      handleCancel,
      isLoading
    };
  },
});
</script>
<style scoped>
.editClueInformation_module {
  display: flex;
  justify-content: center;
}
.form_box {
  width: 40%;
}
</style>
